<!-- 消息按钮组件 -->
<template>
  <div>
    <!-- 单个是否按钮组 -->
    <div v-if="message.type === 'buttom'" class="button-group">
      <button
        class="action-button"
        @click="handleClick(message.cont)"
      >是</button>
      <button class="action-button">否</button>
    </div>
    
    <!-- 单个按钮 -->
    <div v-if="message.type === 'buttom1'" class="button-group">
      <button
        class="action-button large"
        @click="handleClick(message.cont)"
      >{{ message.btn }}</button>
    </div>
    
    <!-- 三个按钮 -->
    <div v-if="message.type === 'buttom3'" class="button-group">
      <button class="action-button">{{ message.btn1 }}</button>
      <button class="action-button">{{ message.btn2 }}</button>
      <button
        class="action-button"
        @click="handleClick(message.cont)"
      >{{ message.btn3 }}</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

// 类型定义
type ChatRole = 0 | 1 | 2; // 0: 系统消息, 1: AI助手, 2: 用户
type MessageType = 'info' | 'img' | 'mp4' | 'buttom' | 'buttom1' | 'buttom3' | 'link';

interface ChatItem {
  id: ChatRole;
  type: MessageType;
  cont?: string;
  btn?: string;
  btn1?: string;
  btn2?: string;
  btn3?: string;
}

// Props 定义
const props = defineProps<{
  message: ChatItem;
}>();

// Emits 定义
const emits = defineEmits<{
  (e: 'buttonClick', message: string): void;
}>();

// 处理按钮点击
const handleClick = (message: string | undefined) => {
  if (message) {
    emits('buttonClick', message);
  }
};
</script>

<style lang="scss" scoped>
.button-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.action-button {
  width: 90px;
  height: 32px;
  margin: 10px 15px 0px 15px;
  background-color: #fff;
  border: 1px solid;
  border-radius: 4%;
  cursor: pointer;
  
  &.large {
    width: 150px;
    height: 36px;
  }
  
  &:hover {
    background-color: darken(#fff, 5%);
  }
}
</style> 